<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07-vuex加减的例子</title>
</head>

<body>
    <div id="app">
        <button @click="showStore">显示仓库的内容</button>
        <!-- 7.显示数据 -->
        <h1>{{this.$store.state.counter}}</h1>
        <button @click="add">加1</button>
    </div>
    <!-- 1.引入vuex依赖 -->
    <script src="./node_modules//vue/dist/vue.js"></script>
    <script src="./node_modules/vuex/dist/vuex.js"></script>
    <script>
        console.log(Vuex);
        //2.创建数据仓库
        let store = new Vuex.Store({
            //3.定义仓库中的数据
            state: {
                counter: 888
            },
            //5.改变值的操作
            mutations: {
                increment: function (state) {
                    state.counter += 1;
                }
            }
        })
        let vm = new Vue({
            //6.数据仓库
            store,
            el: "#app",
            methods: {
                showStore: function () {
                    console.log(this.$store);
                },
                //4.提交数据改变请求
                add: function () {
                    this.$store.commit("increment")
                }
            },
        })
    </script>
</body>

</html>